<template>
    <div class="audit_log_content" v-if="auditLogList.length > 0">
        <el-steps simple>
            <el-step v-for="(item, index) in auditLogList" :key="index">
                <template #title>
                    <el-row class="state_area">
                        <el-col :span="24">
                            <span :class="{success: item.state!==3, error: item.state===3}">{{item.state_name}}</span>
                        </el-col>
                    </el-row>
                    <el-row class="date_area">
                        <el-col :span="24">{{item.create_date}}</el-col>
                    </el-row>
                    <el-row class="user_area">
                        <el-col :span="24">{{item.creator_name}}</el-col>
                    </el-row>
                    <el-row class="role_area">
                        <el-col :span="24">{{item.role_name}}</el-col>
                    </el-row>
                </template>
            </el-step>
        </el-steps>
    </div>
</template>

<script>

    export default {
        name: "AuditLog",
        props: {
            propsData: {
                type: Object,
                default () {
                    return {};
                },
            },
        },
        data () {
            return {
                auditLogList: [],
            };
        },
        watch: {
            propsData: {
                handler () {
                    this.init();
                },
                deep: true,
            }
        },
        mounted () {
            this.init();
        },
        methods: {
            init () {
                let _this = this;
                _this.auditLogList = [];
                if (_this.$utils.isNotEmpty(_this.propsData.data_sid)) {
                    _this.initData(_this.propsData.data_sid);
                }
            },
            initData(data_sid) {
                let _this = this;
            },
        },
    }
</script>

<style lang="less" rel="stylesheet.less" scoped>
    .audit_log_content {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #eee;

        .el-steps--simple {
            padding: 10px 20px;
            color: #000;
            background-color: #fff;

            /deep/ .el-step__main {
                min-width: 260px;
                width: auto;

                .el-step__title {
                    text-align: center;
                    line-height: 1.5;

                    &.is-wait {
                        color: #000;
                    }

                    .state_area {
                        font-size: 16px;

                        .success {
                            color: #67c23a;
                        }

                        .error {
                            color: red;
                        }
                    }

                    .date_area {
                        font-size: 14px;
                        color: #666;
                    }

                    .user_area {
                        font-size: 14px;
                        color: #666;
                    }

                    .role_area {
                        font-size: 16px;
                        color: #409EFF;
                    }
                }

                .el-step__arrow {
                    &:before {
                        background-color: #333;
                    }

                    &:after {
                        background-color: #333;
                    }
                }
            }

            /deep/ .el-step__icon {
                display: none;
            }
        }
    }
</style>
